<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      fixed
    >
      <!-- 搜索按钮 -->
      <van-button
        slot="title"
        class="search-btn"
        type="info"
        round
        icon="search"
        size="small"
        to="/search"
      >搜索</van-button>
    </van-nav-bar>
    <!-- 频道列表 -->
    <van-tabs
      v-model="active"
      class="channel-tabs"
      animated
      swipeable
    >
      <!-- 频道列表的每一个小项 -->
      <van-tab
        :title="obj.name"
        v-for="obj in channels"
        :key="obj.id"
      >
        <!-- 频道文章列表 -->
        <!-- 模板函数挂载处 -->
        <rticleList :channel="obj"></rticleList>
      </van-tab>
      <!-- 插槽函数，解决了最后一个模块显示不完全的问他，把它放在最后面占位 -->
      <div
        slot="nav-right"
        class="placeholder"
      ></div>
      <!-- 插槽函数，设置的汉堡图标 -->
      <div
        @click="isChennelEditShow = true"
        slot="nav-right"
        class="hamburger-btn"
      >
        <!-- 插入自定义的图标 -->
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
    <!-- 频道编辑弹窗 -->
    <van-popup
      v-model="isChennelEditShow"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!-- 频道推荐模板挂载点 -->
      <!-- 两个父传子，一个实现高亮激活效果，一个是传递的数组，实现
      我的频道的渲染 -->
      <!-- 一个自定义事件，有子结点，调用触发自己定义的事件 -->
      <channelEdit
        :channel="channels"
        :active="active"
        @update-active="onUpdateActive"
      ></channelEdit>
    </van-popup>
  </div>
</template>
<script>
// 导入文章列表模板
import rticleList from '../home/components/article-list.vue'
// 导入频道推荐模板
import channelEdit from '../home/components/channel-edit.vue'
// 导入发送请求数据的函数
import { getUserChannels } from '@/api/login'
// 导入公共资源组件
import { mapState } from 'vuex'
// 导入读取数据的请求模块
import { getItem } from '@/utils/storage'
export default {
  // 组件名称
  name: 'HomeIndex',
  // 局部注册的组件
  components: {
    rticleList,
    channelEdit
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      active: 0,
      channels: [],
      isChennelEditShow: false // 这里我们先设置为 true 就能看到弹窗的页面了
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user'])
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
  */
  created () {
    this.loadChannels()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 获取频道数据
    async loadChannels () {
      try {
        // 把获取成功的数据赋值给数组channels
        const { data } = await getUserChannels()
        // 判断用户是否登录
        if (this.user) {
          console.log(333)
          // 登录状态获取自己真实的数据
          this.channels = data.data.channels
        } else {
          // 没有登录的情况
          // 判断本地存储是都有值
          if (getItem('TOUTIAO_CHANNELS')) {
            // 读取本地存储
            this.channels = getItem('TOUTIAO_CHANNELS')
            console.log(111)
          } else {
            console.log(222)
            // 本地存储没有的情况下，通过调用线上的接口获取
            this.channels = data.data.channels
          }
        }
      } catch {
        this.$toast('获取信息失败')
      }
    },
    // 自定义方法调用本函数，并接收两个参数，第二个参数默认为true
    onUpdateActive (i, sunt = true) {
      // 给本页面的active改值，改成子页面传过来的下标，让本页面渲染指定的页面
      this.active = i
      // 弹出层是否显示，根据子组件传递值来进行判断，true表示显示弹出层
      this.isChennelEditShow = sunt
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  // 解决加载中不显示的方法
  padding-bottom: 100px;
  padding-top: 174px;
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
}
.home-container {
  /* home-container内部的 其他已开发样式 这里省略 */

  /* 添加tabs样式 */
  /deep/ .channel-tabs {
    .van-tabs__wrap {
      height: 82px;
      position: fixed;
      top: 92px;
      left: 0;
      right: 0;
      z-index: 1;
      width: 100%;
    }
    .van-tab {
      min-width: 200px;
      border-right: 1px solid #edeff3;
      font-size: 30px;
      color: #777777;
    }

    .van-tab--active {
      color: #333333;
    }

    .van-tabs__nav {
      padding-bottom: 0;
    }

    .van-tabs__line {
      bottom: 8px;
      width: 31px !important;
      height: 6px;
      background: #3296fa;
    }
    .hamburger-btn {
      width: 66px;
      height: 82px;
      position: fixed;
      right: 0;
      display: flex;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      //透明度效果
      opacity: 0.902;
      i.toutiao {
        font-size: 30px;
      }
      &:before {
        content: "";
        position: absolute;
        left: 0;
        width: 1px;
        height: 58px;
        background-image: url(~@/assets/gradient-gray-line.png);
        background-size: contain;
      }
    }
    .placeholder {
      flex-shrink: 0;
      width: 66px;
      height: 82px;
    }
  }
}
</style>
